<template>
	<view class="u-flex custom-tabbar">
		<view :class="['u-flex-1 h100 bg-white left-tabbar-wrapper safe-bottom', ['active','normal'][active]]" @click="tap(0)">
			<i :class="['iconfont icon', active == 0?'icon-flag-on':'icon-flag-off']" style="font-size: 48rpx;"></i>
			<!-- <view>todo</view> -->
		</view>
		<view class="h100 transparent-circle-wrapper safe-bottom">
			<view class="transparent-circle">
				<u-button type="error" class="btn add-btn" :custom-style="customStyle" :ripple="true" ripple-bg-color="#FFF" @click="add">
					<u-icon name="plus" size="52"/>
				</u-button>
			</view>
		</view>
		<view :class="['u-flex-1 h100 bg-white right-tabbar-wrapper safe-bottom', ['normal','active'][active]]" @click="tap(1)">
			<i :class="['iconfont icon', active == 0?'icon-light-off':'icon-light-on']" style="font-size: 48rpx;"></i>
			<!-- <view>idea</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "c-tabbar",
		props: {

		},
		data() {
			return {
				active: 0,
				customStyle: {
					width: "128rpx",
					height: "128rpx",
					borderRadius: "128rpx"
				}
			}
		},
		methods: {
			tap(i) {
				this.active = i
				this.$emit('active', i)
			},
			add() {
				this.$emit('add', this.active)
			}
		}
	}
</script>

<style lang="less">
	.safe-bottom {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.u-flex {
		display: flex;
		align-items: center;
	}

	.custom-tabbar {
		height: 190rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 1;
		.left-tabbar-wrapper {
			border-top-right-radius: 42rpx;
		}

		.right-tabbar-wrapper {
			border-top-left-radius: 42rpx;
		}

		.transparent-circle-wrapper {
			position: relative;
			width: 180rpx;

			.transparent-circle {
				position: absolute;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				left: -20rpx;
				top: -98rpx;
				width: 220rpx;
				height: 160rpx;
				border-radius: 50%;
				box-shadow: 0 310rpx 0 200rpx #FFFFFF;

				.add-btn {
					box-shadow: 0px 5px 12px rgba(138,129,124,0.29), 0px 2px 3px rgba(138,129,124,0.54);
					text-align: center;
					color: #FFFFFF;
					border-radius: 200rpx;
					margin-bottom: 20rpx;
				}
				
			}
		}
	}

	.bg-white {
		background-color: #FFFFFF;
	}

	.u-flex-1 {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 1;
	}
	.active {
		color: #9068be;
	}
	.normal {
		color: #e1e8f0;
	}
	.h100 {
		height: 100%;
	}

</style>
